import type { DirectiveBinding } from 'vue'
import { useLayoutStore  } from '@/stores/layoutConfig';

interface ElType extends HTMLElement {
  overlay?: HTMLElement | null
}

const lineDrag = {
  mounted(el: ElType, binding: DirectiveBinding) {
    const layoutStore = useLayoutStore();
    const layout = binding.value.layout;
    const dragId = binding.value.drag;
    const editor = document.getElementById('bff_editor')
    const editor_header = document.getElementById('editor_header')
    const v4 = document.getElementById('line_v-4')
    const h4 = document.getElementById('line_h-4')
    const lheader4 = document.getElementById('line_header-4')
    const vl5 = document.getElementById('line_v_l-5')
    const vr5 = document.getElementById('line_v_r-5')
    const hl5 = document.getElementById('line_h_l-5')
    const hr5 = document.getElementById('line_h_r-5')
    const lheader5 = document.getElementById('line_header-5')
    const vl6 = document.getElementById('line_v_l-6')
    const vr6 = document.getElementById('line_v_r-6')
    const h6 = document.getElementById('line_h-6')
    const lheader6 = document.getElementById('line_header-6')
    if(!editor || !editor_header) return
    let initialX = 0,
      initialY = 0,
      active = false
    const distance = 100

    const handleMouseDown = (evtd: MouseEvent) => {
      initialX = evtd.clientX - el.offsetLeft
      initialY = evtd.clientY - el.offsetTop
      active = true

      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)

      evtd.preventDefault()
      evtd.stopPropagation()
    }

    let lastMouseMoveTime = 0
    const THROTTLE_DELAY = 10 // 10ms
    const handleMouseMove = (evtm: MouseEvent) => {
      if (!active) return
      // 节流
      const now = Date.now()
      if (now - lastMouseMoveTime < THROTTLE_DELAY) return
      lastMouseMoveTime = now
      el.classList.add('active')

      const x = evtm.clientX - initialX
      const y = evtm.clientY - initialY
      switch (layout) {
        case 4: {
          if(!h4 || !v4 || !lheader4) return
          switch (dragId) {
            case 'line_v-4': {
              const maxLeft = editor.offsetWidth
              if (x < maxLeft - distance && x > distance) {
                el.style.left = `${x}px`
              }
              break
            }
            case 'line_h-4': {
              const maxHeight = editor.offsetHeight
              if (y < maxHeight - distance && y > distance + lheader4.offsetTop) {
                el.style.top = `${y}px`
              }
              break
            }
            case 'line_header-4': {
              const maxHeight = h4.offsetTop
              if (y < maxHeight - distance && y > 40) {
                el.style.top = `${y}px`
                editor_header.style.height = `${y}px`
                v4.style.height = `${editor.offsetHeight - y}px`
                v4.style.top = `${y}px`
              }
              break
            }
          }
          const sizeConfig = {
            type: 4,
            vLeft: v4.offsetLeft,
            hTop: h4.offsetTop,
            headerHeiht: lheader4.offsetTop
          }
          layoutStore.updateLayout(4, sizeConfig)
          break;
        }
        case 5: {
          if(!vl5 || !vr5 || !hl5 || !hr5 || !lheader5) return
          switch (dragId) {
            case 'line_v_l-5': {
              if (x < vr5.offsetLeft - distance && x > distance) {
                el.style.left = `${x}px`
                hl5.style.width = `${x}px`
              }
              break
            }
            case 'line_v_r-5': {
              const maxWidth = editor.offsetWidth - distance
              if (x > vl5.offsetLeft + distance && x < maxWidth) {
                el.style.left = `${x}px`
                hr5.style.width = `${editor.offsetWidth - x}px`
              }
              break
            }
            case 'line_h_l-5':
            case 'line_h_r-5': {
              const maxHeight = editor.offsetHeight
              if (y < maxHeight - distance && y > distance + lheader5.offsetTop) {
                el.style.top = `${y}px`
              }
              break
            }
            case 'line_header-5': {
              const maxHeight = Math.min(hl5.offsetTop, hr5.offsetTop)
              if (y < maxHeight - distance && y > 40) {
                el.style.top = `${y}px`
                editor_header.style.height = `${y}px`
                vl5.style.height = `${editor.offsetHeight - y}px`
                vr5.style.height = `${editor.offsetHeight - y}px`
                vl5.style.top = `${y}px`
                vr5.style.top = `${y}px`
              }
              break
            }
          }
          const sizeConfig = {
            type: 5,
            vlLeft: vl5.offsetLeft,
            vrLeft: vr5.offsetLeft,
            hlTop: hl5.offsetTop,
            hrTop: hr5.offsetTop,
            headerHeiht: lheader5.offsetTop
          }
          layoutStore.updateLayout(5, sizeConfig)
          break;
        }
        case 6: {
          if(!vr6 || !vl6 || !lheader6 || !h6) return
          switch (dragId) {
            case 'line_v_l-6': {
              if(!vr6) return
              const maxLeft = vr6.offsetLeft - distance
              if (x < maxLeft && x > distance) {
                el.style.left = `${x}px`
              }
              break
            }
            case 'line_v_r-6': {
              if(!vl6) return
              const maxLeft = editor.offsetWidth - distance
              if (x < maxLeft && x > distance + vl6.offsetLeft) {
                el.style.left = `${x}px`
              }
              break
            }
            case 'line_h-6': {
              if(!lheader6) return
              const maxHeight = editor.offsetHeight
              if (y < maxHeight - distance && y > distance + lheader6.offsetTop) {
                el.style.top = `${y}px`
              }
              break
            }
            case 'line_header-6': {
              if(!h6 || !vl6 || !vr6) return
              const maxHeight = h6.offsetTop
              if (y < maxHeight - distance && y > 40) {
                el.style.top = `${y}px`
                editor_header.style.height = `${y}px`
                vl6.style.height = `${editor.offsetHeight - y}px`
                vl6.style.top = `${y}px`
                vr6.style.height = `${editor.offsetHeight - y}px`
                vr6.style.top = `${y}px`
              }
              break
            }
          }
          const sizeConfig = {
            type: 6,
            vlLeft: vl6.offsetLeft,
            vrLeft: vr6.offsetLeft,
            hTop: h6.offsetTop,
            headerHeiht: lheader6.offsetTop
          }
          layoutStore.updateLayout(6, sizeConfig)
          break;
        }
      }
    }

    const handleMouseUp = () => {
      el.classList.remove('active')
      active = false
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }

    el.addEventListener('mousedown', handleMouseDown)
  }
}
export default lineDrag
